$(function () {
    let page = 1            //分页功能
    let perpage = 5        //分页功能
    //文章列表数据动态渲染
    // 7.1.发送ajax请求 --文章搜索接口
    function init() {
        $.ajax({
            url: bignew.article_query,
            data: {
                page,      //当前页，为空返回第1页  分页功能所需的请求参数
                perpage,  // 每页显示条数，为空默认每页6条 分页功能所需的请求参数   
                type: $('#selCategory').val(),  //文章类型id--筛选功能使用
                state: $('#selStatus').val(),  //文章状态--筛选功能使用
            },
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                if (res.code === 200) {
                    // 请求成功：渲染数据，把渲染的数据打印到页面指定位置
                    let renderResult = template('articleListTemp', res.data);  //注意数据结构是 data>data
                    $('tbody').html(renderResult);
                    // 生成分页结构
                    setPage(res.data.totalPage)
                }
            },
        })
    }
    init()
    // 7.1.2.在html页面 创建模板引擎

    //7.2 文章分类的下拉列表数据动态渲染
    function selectInit() {
        $.ajax({
            url: bignew.category_list,
            dataType: 'json',
            success: function (res) {
                // console.log(res);
                if (res.code == 200) {
                    let renderResult = template('cateListTemp', res);
                    $('#selCategory').html(renderResult)
                }
            }
        })
    }
    selectInit()   //可以不封装

    //7.3 筛选文章分类
    $('#btnSearch').on('click', function (e) {
        e.preventDefault();  //阻止默认跳转
        //筛选的本质是 按条件的查询 ；条件 就是 下面的两个值(参数) vs 筛选的本质也是查询，区别仅仅在于是否有参数值
        // console.log($('#selCategory').val());   //1   
        // console.log($('#selStatus').val());    //已发布/草稿
        // $('选择器').val(); 目的：取值！ 如果设置了value属性，就获取value的属性值，如果没有设置value属性，那么就会获取到option标签之间的值
        page = 1; //筛选后发现，还是显示所有页数，（因为setPage函数修改了全局page值）此时需要重置 全局的page
        init();
    })

    // 7.4数据分页
    //根据文档使用 插件，生成分页结构，同时还可以实现分页功能
    function setPage(total) {
        $(".pagination").bootstrapPaginator({
            //设置版本号
            bootstrapMajorVersion: 3,   //根据bs库的版本
            // 显示第几页
            currentPage: page,
            // 总页数：z分页时，总页数不能为0，可以设置默认值1
            totalPages: total == 0 ? 1 : total, //最后一步优化 totalPages: total,
            //当单击页码操作按钮的时候, 执行该函数, 调用ajax渲染页面
            onPageClicked: function (event, originalEvent, type, cpage) {
                // cpage就是用户当前所单击的页码值，我们如何获取这个页码所对应的数据呢？我们只需要让ajax根据这个页码去获取数据
                // 1.重置全局的page
                // 2.让ajax重新发送请求
                // console.log(cpage)    //结果为 当前点击的页码
                page = cpage
                init()   //查询（渲染文章列表） 代码中，发送请求成功，调用函数setpage生成分页结构
            }
        })
    }

    // 8.优化页面显示：文章列表中 点击右上角'发表文章'按钮 跳转 左侧导航对应'发表文章' 高亮显示 
    $('#release_btn').on('click', function () {
        $('.level02>li:eq(1)', window.parent.document).addClass('active').siblings().removeClass('active')
    })

    // 10.文章的删除功能 ---事件委托
    $('tbody').on('click', '.btndel', function () {
        // 请求地址：/admin/article/delete
        // 请求方式：post
        //获取数据
        let id = $(this).data().id
        // console.log(id);
        if (confirm('确定要删除该文章吗?')) {
            $.ajax({
                type: 'post',
                url: bignew.article_delete,
                data: { id },
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if (res.code == 204) {
                        alert(res.msg);
                        init();
                    }
                }
            })
        }
    })
})//入口函数结束